<template>
  <view>
    <!-- 搜索框 -->
	<ugo-search></ugo-search>
    <!-- 轮播图 -->
    <swiper class="m-swiper" indicator-dots autoplay circular>
      <swiper-item v-for="item in swiperList" :key="item.goods_id">
        <!-- <navigator
						:url="item.navigator_url"
						open-type="navigate"
						hover-class="navigator-hover"
        >-->
        <image :src="item.image_src" />
        <!-- </navigator> -->
      </swiper-item>
    </swiper>
	<!-- 入口导航模块 -->
	<view class="m-nav">
	<template v-for="item in navList">
		<navigator
		v-if="item.name === '分类'"
		:key="item.name"
		url="/pages/category/index"
		open-type="switchTab"
		hover-class="none"
	>
		<image :src="item.image_src"/>
	</navigator>
		<image v-else :key="item.name" :src="item.image_src"/>
	</template>
	</view>
	<!-- 楼层模块 -->
	<view class="m-floor" v-for="item in floorList" :key="item">
		<view class="floor">
			<image
				class="floor-title"
				:src="item.floor_title.image_src"
				mode="scaleToFill"
			/>
			<view class="floor-list">
				<image
				v-for="goods in item.product_list" :key="goods.name"
				:src="goods.image_src"
				mode="heightFix"
				/>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "搜索",
      swiperList: [],
	  navList:[],
	  floorList:[]
    };
  },
  onLoad() {
    this.getSwiperList();
	this.getNavList()
	this.getFloorList()
  },
 async onPullDownRefresh(){
	await Promise.all([this.getSwiperList(),this.getNavList(),this.getFloorList()])
	//收起下拉的功能
	uni.stopPullDownRefresh()
  },
  methods: {
	// 获取轮播图图片的函数
    async getSwiperList() {
	const res =await uni.$u.http.get('/home/swiperdata')
	this.swiperList = res.data.message
    },
	// 获取入口导航图片的函数
	async getNavList(){
	const res = await uni.$u.http.get('/home/catitems')
	this.navList=res.data.message
	},
	//获取楼层图片的函数
	async getFloorList(){
	const res = await uni.$u.http.get('/home/floordata')
	this.floorList = res.data.message
	}
  }
};
</script>

<style lang="scss">
.m-swiper {
  width: 750rpx;
  height: 340rpx;
  image {
    width: 750rpx;
    height: 340rpx;
  }
}
.m-nav{
	display: flex;
	margin: 12rpx 30rpx;
	justify-content: space-between;
	image{
		width: 128rpx;
		height: 140rpx;
	}
}
.m-floor{
	.floor-title{
		margin-top:43rpx ;
		width: 100%;
		height: 59rpx;
	}
	.floor-list{
		image{
			margin-left: 12rpx;
			margin-bottom: 10rpx;
			float: left;
			height: 188rpx;
			&:first-child{
				height: 386rpx;
			}
		}
	}
}
</style>
